<template>
  <div class="loginPage" v-if="sendShow">
    <img src="@/assets/imgs/login/login.png" />
    <div class="login">
      <img src="@/assets/imgs/login/logo.png" class="logo" @click="goFn" />
      <div v-if="register" class="formWrap">
        <div v-if="one">
          <div class="text">
            {{ forgetPassword ? "密码找回" : "欢迎注册云尘付" }}
          </div>
          <div class="hint">
            {{
              forgetPassword
                ? "云尘付提供2种找回方式，你可使用注册邮箱或该账号所填写的手机号进行密码找回;你也可找本公司的系统管理员进行找回。"
                : "云尘付将发送一封验证邮件到您的邮箱，此邮件将作为登录用户名"
            }}
          </div>
          <div class="forgetBox" v-if="forgetPassword">
            <span
              class="forgetText"
              :class="emailForget ? 'isfooterText' : ''"
              @click="
                emailForget = true;
                username = '';
              "
            >
              邮箱找回
            </span>
            <span
              class="forgetText"
              :class="!emailForget ? 'isfooterText' : ''"
              @click="
                emailForget = false;
                username = '';
              "
            >
              手机号找回
            </span>
          </div>
          <el-input
            style="margin-top: 55px"
            v-model="username"
            maxlength="30"
            :placeholder="emailForget ? '请输入邮箱账号' : '请输入手机号码'"
          ></el-input>
          <div class="checkBox" v-if="!forgetPassword">
            <el-checkbox
              v-model="agreeCheck"
              style="margin-right: 10px"
            ></el-checkbox>
            <span
              >我已阅读并同意<span class="agree" @click="lookFn('服务协议')"
                >《云尘付用户服务协议》</span
              >和<span class="agree" @click="lookFn('隐私权协议')"
                >《隐私权条款》
              </span></span
            >
          </div>
          <div
            class="btn"
            style="width: 355px; margin: 40px auto 0"
            @click="handleSubmit"
            v-throttle="1000"
          >
            发送验证码
          </div>
          <div class="registerBtn registerBtn1">
            <span>已有账号？</span>
            <span class="active cursor" @click="backToLogin">点击登录</span>
          </div>
        </div>
        <!-- <div v-if="two">
          <div class="text">请输入{{forgetPassword ? '验证码' : '注册码'}}</div>
          <div class="hint">
            我们已发送一条验证码至您的邮箱，请查收并输入验证码
          </div>
          <el-input
                  style="margin-top: 55px"
                  placeholder="请输入验证码"
                  v-model="checkCode"
                  :maxlength="6"
                  @input="handleChange"
          ></el-input>
          <div class="againSend">
            <el-button type="text">再次获取验证码</el-button>
          </div>
        </div> -->
        <div v-if="three">
          <div class="text">
            {{ forgetPassword ? "请重新设置密码" : "请设置您的登录信息" }}
          </div>
          <div class="three_title" style="margin-top: 30px">登录密码</div>
          <el-input
            v-model="password"
            placeholder="请输入登录密码"
            show-password
            style="margin-bottom: 20px"
          ></el-input>
          <el-input
            v-model="againPassword"
            placeholder="再次确认密码"
            show-password
          ></el-input>
          <div class="hint">
            为了您的账号安全，请设置数字、大写字母、小写字母和特殊符号至少包含三种，长度至少8位不超过32位
          </div>
          <div
            class="three_title"
            style="margin-top: 40px"
            v-if="!this.$route.query.register_code"
          >
            {{ emailForget ? "邮箱验证码" : "手机验证码" }}
          </div>
          <el-input
            v-if="!this.$route.query.register_code"
            v-model="registerCode"
            :placeholder="emailForget ? '请输入邮箱验证码' : '请输入手机验证码'"
            style="margin-bottom: 20px"
          ></el-input>
          <div
            class="hint"
            style="margin-top: 0px"
            v-if="!this.$route.query.register_code"
          >
            {{
              emailForget
                ? `邮箱验证码已发送到${this.username}，如果没有收到，请检查垃圾邮件`
                : `手机验证码已发送到${this.username}，如果没有收到，请检查垃圾短信`
            }}
          </div>
          <br v-if="!this.$route.query.register_code" />
          <br v-if="!this.$route.query.register_code" />
          <div
            class="three_title"
            v-if="!forgetPassword"
            :style="{
              marginTop: this.$route.query.register_code ? '40px' : '',
            }"
          >
            联系人姓名
          </div>
          <el-input
            v-if="!forgetPassword"
            v-model="realName"
            placeholder="请输入联系人姓名"
            style="margin-bottom: 20px"
          ></el-input>
          <div
            class="btn"
            style="width: 355px; margin: 20px auto 0"
            @click="handleRegister"
            v-throttle="1000"
          >
            {{ forgetPassword ? "确认" : "注册" }}
          </div>
          <div
            v-if="!this.$route.query.register_code"
            class="btn"
            @click="sendFn"
            style="width: 155px; position: absolute; left: 450px; top: 340px"
          >
            {{ send }}
          </div>
        </div>
      </div>
      <div v-else class="formWrap">
        <div class="text">
          <span
            class="cursor"
            :class="type === 2 ? 'active' : ''"
            @click="
              type = 2;
              (username = ''), (password = '');
            "
            >账号登录</span
          >
          <span
            class="cursor"
            :class="type === 1 ? 'active' : ''"
            @click="phoneFn"
            >手机号登录</span
          >
        </div>
        <div v-if="type === 2" style="margin-top: 42px">
          <el-input
            v-model="username"
            placeholder="请输入注册邮箱账号"
          ></el-input>
          <el-input
            v-model="password"
            placeholder="请输入密码"
            show-password
            style="margin-top: 20px"
          ></el-input>
          <!-- <div class="forget" @click="handleForget">忘记密码？</div> -->
          <div style="margin-top: 42px">
            <div class="checkBox" v-if="!forgetPassword">
              <el-checkbox
                v-model="agreeCheckAcc"
                style="margin-right: 10px"
              ></el-checkbox>
              <span
                >我已阅读并同意<span class="agree" @click="lookFn('服务协议')"
                  >《云尘付用户服务协议》</span
                >和<span class="agree" @click="lookFn('隐私权协议')"
                  >《隐私权条款》
                </span></span
              >
            </div>
            <div class="btn" @click="handleLogin" v-throttle="1000">登录</div>
          </div>
        </div>
        <div v-if="type === 1" class="scan">
          <el-input
            clearable
            v-model="phone"
            placeholder="请输入手机号"
          ></el-input>
          <div class="verifyArea">
            <el-input
              clearable
              v-model="phoneCode"
              placeholder="请输入验证码"
              style="width: 73%"
            ></el-input>
            <div class="verifyBtn" @click="phoneCodeFn">
              {{ phoneCodeText }}
            </div>
          </div>

          <SliderCheck
            ref="slider"
            @codeSuccess="codeSuccess"
            style="margin-top: 30px"
            v-if="sliderCheckShow"
            :sliderCheckNum="sliderCheckNum"
          ></SliderCheck>
          <!-- <div class="forget" @click="phoneCodeFn">{{ phoneCodeText }}</div> -->
          <div style="margin-top: 42px">
            <div class="checkBox" v-if="!forgetPassword">
              <el-checkbox
                v-model="agreeCheckAcc"
                style="margin-right: 10px"
              ></el-checkbox>
              <span
                >我已阅读并同意<span class="agree" @click="lookFn('服务协议')"
                  >《云尘付用户服务协议》</span
                >和<span class="agree" @click="lookFn('隐私权协议')"
                  >《隐私权条款》
                </span></span
              >
            </div>
            <div class="btn" @click="handleLogin" v-throttle="1000">登录</div>
          </div>

          <!-- <div>请使用绑定手机号的微信扫码登录</div>
          <div class="code">
            <vueQr text="hello world" :callback="test" qid="testid"></vueQr>
          </div> -->
        </div>
        <div class="registerBtn">
          <div>
            <span>还没有账号？</span>
            <span class="active cursor" @click="clickRegister">注册账户</span>
          </div>
          <div v-if="type == 2" class="for" @click="handleForget">
            忘记密码？
          </div>
        </div>
      </div>
    </div>
    <div class="footerText">
      © 陕西云尘付技术有限公司 陕ICP备
      <el-link
        style="position: relative; top: -2px"
        href="https://beian.miit.gov.cn/"
        target="_blank"
        >19015081号 - 3</el-link
      >
    </div>
  </div>
</template>
<script>
// import vueQr from "vue-qr";
import SliderCheck from "@/components/sliderCheck.vue";
import {
  isEmail,
  isPassword,
  isMobile,
  isPerson,
  regPassNum,
} from "@/utils/validate";
import { setToken, setUserInfo, clearCache } from "@/utils/public";
// import md5 from "js-md5";
import crypto from "@/crypto";
import cObj from "@/utils/config";

export default {
  name: "loginVue",
  data() {
    return {
      emailForget: true,
      debounceTimer: null,
      successCode: "",
      sliderCheckNum: "",
      sliderCheckShow: false,
      phoneCodeText: "获取验证码",
      phone: "",
      phoneCode: "",
      send: "",
      sendShow: false,
      username: "", // 用户名
      password: "", // 密码
      againPassword: "", // 再次确认密码
      email: "", // 邮箱
      realName: "",
      registerCode: "", // 验证码
      type: 2, // 登录方式
      register: false, // 是否展示注册页面
      agreeCheck: false, // 勾选协议
      agreeCheckAcc: false, // 勾选协议-账号
      one: true, // 注册第一步
      // two: false, // 注册第二步
      three: false, // 注册第三步
      forgetPassword: false, // 忘记密码步骤
    };
  },
  components: {
    // vueQr,
    SliderCheck,
  },
  created() {
    // console.log(this.$http);
    // console.log(this.$route.query);
    // 登录页面 缓存重置
    // localStorage.removeItem('vuex')
    this.$store.commit("resetState");
    clearCache();
    if (Object.keys(this.$route.query).length) {
      if (this.$route.query.isRegister == "true1") {
        this.clickRegister();
        this.sendShow = true;
      } else {
        // const params = new FormData();
        // params.append("code", this.$route.query.register_code);
        let params = {
          code: this.$route.query.register_code,
        };
        this.$http.post("/sys/user/isExpiredLinks", params).then((res) => {
          if (res.code === "0000") {
            if (res.data == false) {
              alert("链接已失效");
            } else {
              this.sendShow = true;
              this.three = true;
              this.register = true;
              this.one = false;
            }
          }
        });
      }
    } else {
      this.sendShow = true;
    }
  },
  mounted() {
    window.addEventListener("keydown", this.handleKeyDown);
  },
  destroyed() {
    window.removeEventListener("keydown", this.handleKeyDown, false); //销毁回车事件
  },
  methods: {
    backToLogin() {
      this.register = false;
      this.forgetPassword = false;
    },
    codeSuccess(val) {
      console.log(val);
      // const params = new FormData();
      // params.append("phone", this.phone);
      // params.append("sliderCode", crypto.get(this.successCode));
      this.successCode = val;
      let params = {
        phone: this.phone,
        sliderCode: crypto.get(this.successCode),
      };
      this.$http.post("/sms/sendLoginPhoneSmsCode", params).then(
        (res) => {
          if (res.code === "0000") {
            var codeTime = 60;
            this.phoneCodeText = codeTime + "s";
            var time = setInterval(() => {
              codeTime = codeTime - 1;
              this.phoneCodeText = codeTime + "s";
              if (codeTime == 0) {
                clearInterval(time);
                this.phoneCodeText = "获取验证码";
                this.sliderCheckShow = false;
              }
            }, 1000);
          }
        },
        function () {}
      );
    },
    goFn() {
      window.open(`${cObj.websiteUrl}`);
      // if (process.env.VUE_APP_ENV == "production") {
      //   window.open("http://yuncnpay.com");
      // } else if (process.env.VUE_APP_ENV == "test") {
      //   window.open("http://192.168.2.142:30004");
      // } else if (process.env.VUE_APP_ENV == "pre") {
      //   window.open("http://pre.yuncnpay.com");
      // } else {
      //   window.open(`http://${window.location.hostname}:30004/`);
      // }
    },
    phoneFn() {
      if (this.phoneCodeText == "") {
        this.phoneCodeText = "获取验证码";
      }
      this.type = 1;
      (this.phone = ""), (this.phoneCode = "");
      this.sliderCheckShow = false;
    },
    phoneCodeFn() {
      if (!isMobile(this.phone)) {
        this.$message.warning("请输入正确手机号码！");
      } else {
        if (this.phoneCodeText == "获取验证码") {
          this.$http
            .get(`/sys/user/getSliderCode?phone=${this.phone}`)
            .then((res) => {
              if (res.code === "0000") {
                this.sliderCheckNum = res.data;
                this.sliderCheckShow = true;
                // this.phoneCodeText = "获取验证码";
                this.successCode = "";
              }
            });
        }
      }
    },
    lookFn() {
      window.open("/法律条款.pdf");
      // if (val == "服务协议") {
      //   window.open("/云尘付支付结算软件服务协议.pdf");
      // } else {
      //   window.open("/云尘付隐私权政策.pdf");
      // }
    },
    sendFn() {
      if (this.send == "重新发送") {
        this.$http
          .post("sys/user/sendMailCode", {
            username: this.emailForget ? this.username : null,
            codeType: this.forgetPassword ? 2 : 1,
            resetPwdWay: this.emailForget ? 2 : 1,
            mobile: this.emailForget ? null : this.username,
          })
          .then((res) => {
            if (res.code === "0000") {
              //  1 注册  2 修改密码
              this.$message.closeAll();
              this.$message.success("发送成功");
              var time = 60;
              this.send = time + "s 重新发送";
              var setTime = setInterval(() => {
                time = time - 1;
                this.send = time + "s 重新发送";
                if (time == 0) {
                  clearInterval(setTime);
                  this.send = "重新发送";
                }
              }, 1000);
            }
          });
      }
    },
    clickRegister() {
      this.register = true;
      this.forgetPassword = false;
    },
    // 忘记密码
    handleForget() {
      this.emailForget = true;
      this.forgetPassword = true;
      this.register = true;
    },
    // 注册填写邮箱提交
    handleSubmit() {
      if (!this.agreeCheck && this.forgetPassword === false) {
        this.$message.closeAll();
        return this.$message.warning("请勾选服务协议！");
      }
      if (this.emailForget) {
        if (!isEmail(this.username)) {
          this.$message.closeAll();
          this.$message.warning("请输入合法邮箱！");
        } else {
          // this.one = false;
          //   this.three = true
          this.$http
            .post("sys/user/sendMailCode", {
              username: this.username,
              codeType: this.forgetPassword ? 2 : 1,
              resetPwdWay: 2,
            })
            .then((res) => {
              if (res.code === "0000") {
                //  1 注册  2 修改密码
                this.one = false;
                this.three = true;
                this.againPassword = "";
                this.realName = "";
                this.password = "";
                this.registerCode = "";
                var time = 60;
                this.send = time + "s 重新发送";
                var setTime = setInterval(() => {
                  time = time - 1;
                  this.send = time + "s 重新发送";
                  if (time == 0) {
                    clearInterval(setTime);
                    this.send = "重新发送";
                  }
                }, 1000);
              }
            });
        }
      } else {
        if (!isMobile(this.username)) {
          this.$message.closeAll();
          this.$message.warning("请输入正确手机号码！");
        } else {
          // this.one = false;
          //   this.three = true
          this.$http
            .post("sys/user/sendMailCode", {
              codeType: this.forgetPassword ? 2 : 1,
              resetPwdWay: 1,
              mobile: this.username,
            })
            .then((res) => {
              if (res.code === "0000") {
                //  1 注册  2 修改密码
                this.one = false;
                this.three = true;
                this.againPassword = "";
                this.realName = "";
                this.password = "";
                this.registerCode = "";
                var time = 60;
                this.send = time + "s 重新发送";
                var setTime = setInterval(() => {
                  time = time - 1;
                  this.send = time + "s 重新发送";
                  if (time == 0) {
                    clearInterval(setTime);
                    this.send = "重新发送";
                  }
                }, 1000);
              }
            });
        }
      }
    },
    // 验证码校验
    handleChange(val) {
      if (val.length === 6) {
        this.two = false;
        this.three = true;
        // this.$http.post(
        //         "sys/user/checkCode",
        //         {
        //           username:this.username,
        //           code: this.checkCode
        //         }
        // ).then(()=>{
        //   this.two = false;
        //   this.three = true;
        // });
      }
    },
    // 注册
    handleRegister() {
      if (this.password == "") {
        return this.$message.warning("密码有误");
      }
      if (this.password.indexOf(" ") > 0) {
        this.$message.closeAll();
        return this.$message.warning(
          "只能包含数字、大写字母、小写字母或特殊符号"
        );
      }
      if (this.password.length < 8 || this.password.length > 32) {
        this.$message.closeAll();
        return this.$message.warning("密码长度8-32个字符");
      }
      if (isPassword(this.password)) {
        this.$message.closeAll();
        return this.$message.warning(
          "只能包含数字、大写字母、小写字母或特殊符号"
        );
      }
      if (regPassNum(this.password) !== 3 && regPassNum(this.password) !== 4) {
        this.$message.closeAll();
        return this.$message.warning(
          "数字、大写字母、小写字母和特殊符号至少包含3种"
        );
      }

      if (this.password !== this.againPassword) {
        this.$message.closeAll();
        return this.$message.warning("两次输入密码不一致，请重新输入");
      }
      if (!this.forgetPassword && !this.realName) {
        this.$message.closeAll();
        return this.$message.warning("联系人姓名必填");
      }
      if (
        !this.forgetPassword &&
        (!isPerson(this.realName) || this.realName.length > 15)
      ) {
        this.$message.closeAll();
        return this.$message.warning("姓名格式不正确，且不得超过15位");
      }
      // 忘记密码
      if (this.forgetPassword) {
        this.$http
          .post("/sys/user/password", {
            password: crypto.set(this.password),
            resetPwdWay: this.emailForget ? 2 : 1,
            username: this.emailForget ? this.username : null,
            mobile: this.emailForget ? null : this.username,
            // password: md5(this.password),
            registerCode: this.registerCode,
          })
          .then((res) => {
            if (res.code === "0000") {
              this.$message.closeAll();
              this.$message.success("密码设置成功，请登录");
              this.password = "";
              this.one = true;
              // this.two = false;
              this.register = false;
              this.three = false;
              this.forgetPassword = false;
            }
          });
      } else {
        let data = {
          username: this.username,
          password: crypto.set(this.password),
          // password: md5(this.password),
          userType: "main_admin",
          registerCode: this.registerCode,
          realName: this.realName,
        };
        if (this.$route.query.register_code) {
          data = {
            registerCode: this.$route.query.register_code,
            password: crypto.set(this.password),
            // password: md5(this.password),
            userType: "sub_admin",
            realName: this.realName,
          };
        }
        // 调用后台，创建商户账号，数据
        this.$http.post("/sys/user/register", data).then((res) => {
          if (res.code === "0000") {
            this.$message.closeAll();

            this.$message.success(this.username + " 注册成功，请登录");
            this.password = ""; // 密码
            this.one = true;
            // this.two = false;
            this.register = false;
            this.three = false;
          } else {
            // this.$message.error(this.username + " 注册失败")
          }
        });
      }
    },
    handleKeyDown(e) {
      if (this.three) {
        if (e.keyCode === 13) {
          this.fdFn(this.handleRegister);
        }
      } else if (this.one && !this.register) {
        if (e.keyCode === 13) {
          this.fdFn(this.handleLogin);
        }
      } else if (this.one) {
        if (e.keyCode === 13) {
          this.fdFn(this.handleSubmit);
        }
      }
    },
    fdFn(fun) {
      if (this.debounceTimer) {
        clearTimeout(this.debounceTimer);
      }
      let callNow = !this.debounceTimer; //是否立即执行
      this.debounceTimer = setTimeout(() => {
        this.debounceTimer = null;
      }, 1000);
      if (callNow) {
        fun();
      }
    },
    // 登录
    handleLogin() {
      if (!this.agreeCheckAcc && this.forgetPassword === false) {
        this.$message.closeAll();
        return this.$message.warning("请勾选服务协议！");
      } else {
        if (this.type == 2) {
          if (this.username === "") {
            this.$message.closeAll();
            this.$message.warning(" 账号不能为空");
          } else if (this.password === "") {
            this.$message.closeAll();
            this.$message.warning(" 密码不能为空");
          } else {
            //console.log(crypto.set(this.password));
            // console.log(crypto.get(crypto.set(this.password)))
            //登录
            this.$http
              .post("/sys/user/login", {
                username: this.username,
                password: crypto.set(this.password),
                // password: md5(this.password),
              })
              .then((res) => {
                if (res.code === "0000") {
                  setToken(res.data.token);
                  delete res.data.token;

                  this.getMenuAuth();
                  // console.log(2);
                  this.$store.dispatch("getButton");
                  this.$store.dispatch("getChannelList");
                  this.$store.dispatch("getChannelListType");
                  this.refreshCurrentUser();
                }
              });
          }
        } else {
          if (!this.successCode) {
            this.$message.warning("请先获取短信验证码");
          } else {
            if (this.phone === "") {
              this.$message.warning(" 手机号码不能为空");
            } else if (this.phoneCode === "") {
              this.$message.warning(" 验证码不能为空");
            } else {
              this.$http
                .post("/sys/user/loginByPhone", {
                  phone: this.phone,
                  smsCode: this.phoneCode,
                })
                .then(
                  (res) => {
                    if (res.code === "0000") {
                      setToken(res.data.token);
                      // delete res.data.token;
                      this.getMenuAuth();
                      // console.log(2);
                      this.$store.dispatch("getButton");
                      this.$store.dispatch("getChannelList");
                      this.$store.dispatch("getChannelListType");
                      this.refreshCurrentUser();
                      // this.getMenuAuth().then(() => {
                      //   this.$store.dispatch("getButton");
                      //   this.$store.dispatch("getChannelList");
                      //   this.$store.dispatch("getChannelListType");
                      //   this.refreshCurrentUser();
                      // });
                    }
                  },
                  function () {}
                );
            }
          }
        }
      }
    },
    async getMenuAuth() {
      await this.$store.dispatch("getMenu"); //菜单权限
      await this.$store.dispatch("getMenuQiye");
      await this.$store.dispatch("getMealList");
      // console.log(1);
      // return new Promise(async (resolve, reject) => {
      //   resolve();
      // });
    },
    refreshCurrentUser() {
      this.$http.post("/sys/user/refreshCurrentUser").then((res) => {
        if (res.code === "0000") {
          setUserInfo({ ...res.data });
          this.$router.push("/middleWork");
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.verifyArea {
  display: flex;
  align-items: center;
  margin-top: 20px;
  :deep(.el-input__inner) {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .verifyBtn {
    width: 27%;
    height: 46px;
    line-height: 46px;
    border: 1px solid #e5e5e5;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 0;

    font-size: 14px;
    color: #1d1c1c;
  }
}
.send {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.loginPage {
  width: 100%;
  height: 100vh;
  background: #fff;
  display: flex;
  justify-content: space-between;
  .footerText {
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100vw;
  }
}
.login {
  flex: 1;
  position: relative;
  .logo {
    cursor: pointer;
    width: 120px;
    position: absolute;
    right: 60px;
    top: 60px;
  }
  .formWrap {
    width: 410px;
    height: 500px;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    .active {
      color: #03bfc6;
    }
    .forget {
      text-align: right;
      margin: 15px 0 25px 0;
      color: #bfbfbf;
      cursor: pointer;
      font-size: 12px;
    }
    .btn {
      height: 46px;
      line-height: 46px;
      color: #fff;
      border-radius: 8px;
      text-align: center;
      font-size: 16px;
      background: linear-gradient(to right, #03bfc6, #32e3c9);
      cursor: pointer;
    }
    .checkBox {
      color: #bfbfbf;
      margin-top: 15px;
      margin-bottom: 10px;
    }
    .agree {
      color: #3fbbbc;
      cursor: pointer;
    }
    .againSend {
      text-align: center;
      margin-top: 20px;
    }
    .scan {
      margin-top: 42px;
      color: #666;
      text-align: center;
      .code {
        margin-top: 20px;
        img {
          width: 300px;
          height: 300px;
          border: 1px solid #e5e5e5;
        }
      }
    }
    .registerBtn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // text-align: center;
      margin-top: 70px;
      .for {
        color: #bfbfbf;
        cursor: pointer;
      }
    }
    .registerBtn1 {
      justify-content: center;
    }
    .cursor {
      cursor: pointer;
    }
  }
  .text {
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: #1d1c1c;
    span {
      margin: 0 32px;
      padding-bottom: 5px;
      border-bottom: 2px solid transparent;
      &.active {
        color: #03bfc6;
        border-color: #03bfc6;
      }
    }
    // span {
    //   &:first-child {
    //     margin-left: 96px;
    //     margin-right: 42px;
    //   }
    // }
  }
  .hint {
    font-size: 16px;
    color: #666;
    margin-top: 20px;
  }
  .forgetBox {
    position: relative;
    top: 40px;
    .forgetText {
      margin-right: 40px;
      font-size: 16px;
      display: inline-block;
      font-weight: 500;
      color: #666;
      cursor: pointer;
      &:hover {
        color: #03bfc6;
      }
    }
    .isfooterText {
      color: #03bfc6;
    }
  }
  :deep(.el-input__inner) {
    height: 46px;
  }
  .three_title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
}
:deep(.el-input__inner) {
  background-color: transparent !important;
}
:deep(.el-input__inner:-webkit-autofill) {
  -webkit-text-fill-color: black !important;
  transition: background-color 5000s ease-in-out 0s;
}
</style>
